
<template>
  <main>
    <div class="container">
      <h1>欢迎使用Feng待办事项!</h1>
      <todo-add :tid="todos.length" @add-todo="addTodo"></todo-add>
      <todo-filter :kind="kind" @change-filter="kind=$event"></todo-filter>
      <todo-list :todos="filteredTodos"></todo-list>
    </div>
  </main>
</template>

<script>
import TodoAdd from './components/TodoAdd.vue'
import TodoFilter from './components/TodoFilter.vue'
import TodoList from './components/TodoList.vue'
import useTodo from './comApi/useTodoAdd.js'
import useTodoFilter from './comApi/useTodoFilter.js'
// 写项目前先要分析视图--然后剖分组件
export default {
  name: 'App',
  components: {
    TodoAdd,
    TodoFilter,
    TodoList
  },
  setup() {
    const {todos,addTodo} = useTodo();
    const {kind,filteredTodos} = useTodoFilter(todos);

    console.log(filteredTodos.value)
    return {
      todos,
      addTodo,
      kind,
      filteredTodos,
    }
  }
}
</script>

<style >
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Helvetica, "PingFang SC", "Microsoft Yahei", sans-serif;
  }
  main {
    width: 100vw;
    padding: 10vh 0;
    min-height: 100vh;
    display: grid;
    align-items: start;
    justify-items: center;
    background-color: #d8dfff;
  }
  .container {
    width: 60%;
    max-width: 400px;

    box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.15);
    border-radius: 24px;
    padding: 48px 28px;
    background-color: rgb(245, 246, 252);
  }
  h1 {
    font-size: 28px;
    margin: 24px 0;
    color: #414873;
  }
</style>
